<template>
  <!-- Title -->
  <div>
    <TitleCompound :title="title" :description="description" />

  </div>

  <!-- content -->
  <div>
    <el-row class="tac">
      <!-- menu -->
      <el-col :span="5">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
          <el-radio-button :value="false">expand</el-radio-button>
          <el-radio-button :value="true">collapse</el-radio-button>
        </el-radio-group>
        <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
          @close="handleClose">
          <el-sub-menu v-for="category, idx in newsTypeList" :index="'' + idx" :key="category.id">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>{{ category.type }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-for="news, idx in newsStore.getNews(category.type)" :key="news.id" :index="'' + idx">
                <RouterLink :to="`/router-summary/detail?id=${news.id}`">{{ news.title }}</RouterLink>

              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-col>
      <!-- detail -->
      <el-col :span="18">
        <RouterView></RouterView>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {

  Location,
} from '@element-plus/icons-vue'
import TitleCompound from '@/components/TitleCompound.vue'
import { useNewsStore } from '@/stores/News'

const title = 'Router Summary'
const description = `
这是<b>query</b>路由传参的一种实现<br>
1. <b>router/index.ts的添加路由：</b>
<code>
    {<br>
      path: '/router-summary',<br>
      name: 'router-summary',<br>
      component: () => import('../views/router/SummaryView.vue'),<br>
      children: [<br>
        {<br>
          path: 'detail',<br>
          name: 'router-summary-detail',<br>
          component: () => import('../views/router/DetailView.vue'),<br>
        },<br>
      ],<br>
    },<br>
</code>
2. <b>router/SummaryView.vue的路由跳转：</b>
<code>
 &lt;RouterLink <br>
 :to="\`/router-summary/detail?id=\${news.id}\`"&gt;<br>
 {{ news.title }} </br>

 &lt;/RouterLink&gt;

</code>
<br>
3.另外<b>slots</b>实现请查看 slots-summary。
`

const isCollapse = ref(false)
// const menuSpanSize = ref(3)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  // menuSpanSize.value = 5
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  // menuSpanSize.value = 3
}

const newsStore = useNewsStore()

const newsTypeList = newsStore.newsType

</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
